<template>
    <checkbox-group @change="checkboxChange($event, index)" class="checkmain">
        <label v-for="(itemcheckbox, itemindex) in data" :key="itemindex" class="text-show-line-1">
            <checkbox
                :value="itemcheckbox.name"
                :checked="itemcheckbox.check"
                color="#007e41"
                style="transform: scale(0.7)" />
            <view>{{ itemcheckbox.name }}</view>
        </label>
    </checkbox-group>
</template>

<script>
export default {
    props: {
        data: {
            // 数据
            type: Array,
        },
        index: {
            type: Number,
            default: 0,
        },
		perfect: {
            type: Number,
            default: 0,
        },
    },
    data() {
        return {}
    },
    methods: {
        checkboxChange: function (e, index) {
			if(this.perfect==1){
				let value = e.detail.value.join("|")
				this.$emit("checkboxChange", index, value)
			}else{
				let value = e.detail.value.join(",")
				this.$emit("checkboxChange", index, value)
			}
        },
    },
}
</script>

<style lang="scss">
.checkmain {
    display: flex;
    flex-wrap: wrap;

    label {
        display: flex;
        width: 50%;

        view {
            white-space: nowrap;
        }
    }
}
</style>
